<template>
  <div class="footer">
    <van-tabbar v-model="active">
      <van-tabbar-item>
        <router-link to="/">
          <span class="iconfont">&#xe616;</span>
          <div>首页</div>
        </router-link>
      </van-tabbar-item>
      <van-tabbar-item>
        <router-link to="Sellingcars">
          <span class="iconfont">&#xe63f;</span>
          <div>卖车</div>
        </router-link>
      </van-tabbar-item>
      <van-tabbar-item>
        <router-link to="news">
          <span class="iconfont">&#xe622;</span>
          <div>消息</div>
        </router-link>
      </van-tabbar-item>
      <van-tabbar-item>
        <router-link to="Collection">
          <span class="iconfont">&#xe629;</span>
          <div>收藏</div>
        </router-link>
      </van-tabbar-item>
      <van-tabbar-item>
        <router-link to="my">
          <span class="iconfont">&#xe651;</span>
          <div>我的</div>
        </router-link>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  methods: {},
};
</script>
<style lang="less" scoped>
// css初始化
body,
html {
  margin: 0;
  height: 100vh;
}

/* 去掉a的下划线 */
a {
  text-decoration: none;
}

/* 搜索框去除边框 */
input,
button {
  border: 0;
  /* 设置背景颜色为透明 */
  background-color: transparent;
  /* 去掉外轮廓 */
  outline: none;
}

/* 图片的空白间隙 */
img {
  vertical-align: middle;
}
// css初始化结束
.footer {
  position: fixed;
  width: 750px;
  height: 102px;
  text-align: center;
  bottom: 0;
  left: 0;
  span.iconfont {
    font-size: 40px;
    color: #8c8c8c;
    div {
      font-size: 19px;
      margin-top: 20px;
      color: #656565;
    }
  }
}
</style>